<template>
	<view>
		

		<view class="top-info">
			<view class="left-wrap">
				<view class="img-wrap">
					<image style="width: 140rpx; height: 140rpx;"  src="/static/imgnew/touxiang.png"></image>
				</view>
				<view class="name" style="font-weight:bold;padding:20rpx 0 0 15rpx">
					{{user.username}}
					<!-- <view>{{arraysname[nameindex]}}</view> -->
				</view>
				
			</view>
			
			<view class="righ-wrap">
				<view style="font-weight:normal;padding:20rpx 0 0 15rpx">{{specificDate}} {{clockTime}}</view>
			</view>
		</view>
		
		
		<view class="ipt-wrap">

			<!-- <view class="item-wrap">
				<view class="left">
					所属测站
				</view>
				<view class="right">
					<picker @change="PickerChange($event,'nameindex')" :value="nameindex" :range="arraysname">
						<view class="uni-input">{{arraysname[nameindex]}}</view>
					</picker>

				</view>
			</view> -->
			
			<view class="item-wrap">
				<view class="left">
					打卡类型
				</view>
				<view class="right">
					<picker @change="PickerChange($event,'clockTypeindex')" :value="clockTypeindex" :range="arraysclockType">
						<view class="uni-input">{{clockTypeindex==0?'上班':'下班'}}</view>
					</picker>
					
			
				</view>
			</view>
			
			
			<view class="item-wrap">
				<view class="left">
					打卡点位
				</view>
				<view class="right">
					{{location?location:'正在获取位置信息...'}}
			
				</view>
			</view>
			
			
			
			
			
			<view class="item-wrap">
				<view class="left">
					备注
				</view>
				<view class="right">
					<input class="uni-input"  v-model="remark"  placeholder="请输入备注" />
				</view>
			</view>
			
			
			<map style="width: 100%; height: 400rpx;" :latitude="coordinate.split('/')[0]" :longitude="coordinate.split('/')[1]" :markers="covers">
			</map>

			
			
			
			
		</view>
		
		<view style="opacity:0">888</view>
		<view class="sub-btn" @tap="subdata(true)">
			<view class="time-wrap" style="color:#fff">
					{{clockTime}}
			</view>
			<image v-if="pagedata.clockInTime&&pagedata.clockOffTime"  style="width: 294rpx; height: 294rpx;"  src="/static/imgnew/gcircle.png" />
			<image v-else  src="/static/imgnew/bcircle.png" />
		</view>
		
		<view style="text-align: center;" v-show="pagedata.clockInTime&&!pagedata.clockOffTime">
			今日已签到，未签退
		</view>
		<view style="text-align: center;" v-show="!pagedata.clockInTime&&!pagedata.clockOffTime">
			今日未签到，未签退
		</view>
		<view style="text-align: center;" v-show="!pagedata.clockInTime&&pagedata.clockOffTime">
			今日未签到，已签退
		</view>
		<view style="text-align: center;" v-show="pagedata.clockInTime&&pagedata.clockOffTime">
			今日已签到，已签退
		</view>
	</view>
</template>


<script>
	
	
	const GetDistance=( lat1, lng1, lat2, lng2)=>{
	var radLat1 = lat1*Math.PI / 180.0;
	var radLat2 = lat2*Math.PI / 180.0;
	var a = radLat1 - radLat2;
	var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
	var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
	Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
	s = s *6378.137 ;// EARTH_RADIUS;
	s = Math.round(s * 10000) / 10000;
	return s;
	}
	
	
	export default{
		//components: { AMapWalking },
		data(){
			return {
				covers:[],
				longitude:uni.getStorageSync("longitude"),
				latitude:uni.getStorageSync("latitude"),
				startPoint:[],
				endPoint:[],
				timergetTime:null,
				arraysclockType:['上班','下班'],
				clockTypeindex:0,
				clockType:'',
				files:'',
				remark:'',
				distance:0,
				clockTime:'',
				specificDate:'',
				arraysname:[],
				nameindex:0,
				user:{},
				coordinate:'',
				location:'',
				stcdList:[],
				pagedata:{}
				
			}
		},
		onLoad(options){
			
			let that=this
			this.timergetTime=setInterval(function(){
				 that.getTime()
			},1000)
			// 使用setInterval定时获取位置信息
			setInterval(() => {
				
			    uni.getLocation({
					geocode:true,
			        type: 'gcj02',
			        success: (res) => {
						//let data=that.WGS84ToGCJ(res.longitude,res.latitude)
						
						that.distance=GetDistance(res.latitude,res.longitude,that.latitude,that.longitude)*1000
						
						that.covers=[{
							latitude:res.latitude,
							longitude:res.longitude,
							iconPath:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
						}]
						that.coordinate=res.latitude+'/'+res.longitude
						that.location=res.address.district+res.address.street+res.address.streetNum
						that.startPoint=[res.longitude,res.latitude]
						// "city": "南昌市",
						// "district": "红谷滩区",
						// "street": "洪州大道西",
						// "streetNum": "699号",
						// "poiName": "庙背山",
			           
			        },
					fail: function(res) { 
						
						uni.showToast({
						    title: res.errMsg,
						    duration:4000,
							icon:'none'
						});
						console.log(res) 
					},  
			    })
				// UNI_LOCATION.getLocation(options).then(res => {
				//     console.log('uni-location success:', res)
				// }).catch(err => {
				//     console.log('uni-location error:', err)
				// })
			}, 5000)
			
			
			this.user=JSON.parse(uni.getStorageSync("userinfo"))
			
			
			
			this.stcdList=this.user.stcdList
			
			
			// if(options.pagedata){
				
			// 	this.pagedata=JSON.parse(options.pagedata)
			// 	this.clockTypeindex=this.pagedata.clockInTime?1:0
			// 	this.location=this.pagedata.location
			// 	this.pagedata.deviceNo=this.pagedata.deviceNo
			// 	this.files=this.pagedata.files
			// 	this.maintenanceContent=this.pagedata.maintenanceContent
			// 	this.specificDate=this.pagedata.specificDate
			// 	this.remark=this.pagedata.remark
			// 	this.stType=this.pagedata.stType
			// 	for(let i=0;i<this.stcdList.length;i++){
			// 		if(this.stcdList[i].stcd==this.pagedata.stcd){
			// 			this.nameindex=i
			// 		}
			// 	}
			// 	this.stcd=this.pagedata.stcd
				
				
			// }
			
			this.getDatrecord()
			
			this.arraysname=this.stcdList.map(item=>{
				return item.stnm
			})
			
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/qiandaoguanli/record'
			});
		},
		
		onPullDownRefresh:function(){
			
			this.getData()
		 },
		onReachBottom() {
			
			this.getData()	
		},
		methods: {
			getDatrecord(){
				let that=this
				that.apipost('/soilWater/manage/attendance/view/getTodayAttendanceRecord',{
				
					userCode:that.user.userNo
				},false).then(res => {
					
					
					if(res.code==1){
						
						
						if(res.object){
							
							that.pagedata=res.object
							that.clockTypeindex=that.pagedata.clockInTime?1:0
							that.location=that.pagedata.location
							that.pagedata.deviceNo=that.pagedata.deviceNo
							that.files=that.pagedata.files
							that.maintenanceContent=that.pagedata.maintenanceContent
							that.specificDate=that.pagedata.specificDate
							that.remark=that.pagedata.remark
							that.stType=that.pagedata.stType
							for(let i=0;i<that.stcdList.length;i++){
								if(that.stcdList[i].stcd==that.pagedata.stcd){
									that.nameindex=i
								}
							}
							
							
							
						}
						console.log(res)
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			
			 WGS84ToGCJ(wgLon,wgLat){
			     var pi = 3.14159265358979324
			     var ee = 0.00669342162296594323
			     var a = 6378245.0
			 
			     var dLat = this.transformLat(wgLon-105.0, wgLat-35.0)
			     var dLon = this.transformLon(wgLon-105.0, wgLat-35.0)
			     let radLat = wgLat / 180.0 * pi;
			     var magic = Math.sin(radLat);
			     magic = 1 - ee * magic * magic;
			     var sqrtMagic = Math.sqrt(magic);
			     dLat = (dLat * 180.0) / ((a * (1-ee)) / (magic * sqrtMagic) * pi);  
			     dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi); 
			     var mgLat = parseFloat(wgLat) + parseFloat(dLat);  
			     var mgLon = parseFloat(wgLon) + parseFloat(dLon); 
			     var d = [mgLon,mgLat]
			     return d
			 },
			 //转为纬度
			 transformLat(x,y){
			     var pi = 3.14159265358979324;
			     var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));  
			     ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;  
			     ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;  
			     ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;  
			     return ret
			 },
			 //转换经度
			 transformLon(x,y){
			     var pi = 3.14159265358979324;
			     var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));  
			     ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;  
			     ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;  
			     ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;  
			     return ret
			 }, 
			getTime(){
				const currentTime = new Date();
				const year = currentTime.getFullYear();
				const month = currentTime.getMonth() + 1; // 月份从0开始，因此需要加1
				const day = currentTime.getDate();
				const hours = currentTime.getHours();
				const minutes = currentTime.getMinutes();
				const seconds = currentTime.getSeconds();
				this.specificDate=`${year}-${month>9?month:'0'+month}-${day>9?day:'0'+day}`
				this.clockTime=`${hours>9?hours:'0'+hours}:${minutes>9?minutes:'0'+minutes}:${seconds>9?seconds:'0'+seconds}`
				
				//this.clockType=hours<9?1:2
			},
			PickerChange(val,type){
				this[type]=val.detail.value
			},
			subdata(){
				let that=this
				if(!this.coordinate){
					uni.showToast({
					    title: '未获取位置信息，无法完成打卡',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.distance>500){
					uni.showToast({
					    title: '大于打卡点位500米，无法完成打卡',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.maintenanceContent==''){
					uni.showToast({
					    title: '请输入维修内容',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				
				
				that.apipost('/soilWater/manage/attendance/save/saveAttendanceRecord',{
					clockTime:that.clockTime,
					clockType:that.clockTypeindex+1,
					//id:that.pagedata.id?that.pagedata.id:'',
					location:that.location,
					coordinate:that.coordinate,
					specificDate:that.specificDate,
					remark:that.remark,
					userName:that.user.username,
					stnm:that.stcdList[that.nameindex].stnm,
					stcd:that.stcdList[that.nameindex].stcd,
					userCode:that.user.userNo
				},false).then(res => {
					
					
					if(res.code==1){
						uni.showToast({
							icon: 'none',
							duration:4000,
							title: '操作成功'
						});
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},800)
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
			
			
		},

	}
</script>
<style>
	.time-wrap{
		z-index:99;
		bottom:10rpx;
		left:0;
		position:absolute;
		width:100%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
	}
	.left-wrap{
		display: flex;
		
	}
	.sub-btn{
		position:relative;
		width:294rpx;
		height:294rpx;
		box-sizing: border-box;
		margin:0 auto;
		
		
	}
	.tip-wrap{
		margin-top:30rpx;
		line-height:54rpx;
		padding-left:40rpx;
	}
	page{
		height:100%;
		background:#F5F9FF;
	}
	.ipt-wrap{

		padding:0 40rpx;
		background:#fff;
	}
	.item-wrap{
		border-bottom:1rpx solid rgba(63,140,255,0.2);;
		color:#00041A;
		height:95rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	textarea,input{
		text-align: right;
	}
	.top-info{
		background:#fff;
		padding:30rpx 48rpx 30rpx 48rpx;
		display:flex;
		justify-content: space-between;
	}
</style>